package myJs.components.inline

import cats.effect.SyncIO
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import myJs.Implicits._
import myJs.components.PureInputComponent
import myJs.myPkg.jquery._
import myJs.tool.Tool
import myJs.tool.Tool._

/** Created by yz on 3/11/2020
  */
object InputInlineComponent {

  case class Props(
      state: StateSnapshot[String],
      label: String,
      name: String,
      show: Boolean = true,
      formJq: JQuery = $("#form"),
      questionInfo: String = "",
      labelWidth: Int = 4,
      inputWidth: Int = 8
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  class Backend(bs: BackendScope[Props, Unit]) {

    def didMount = {
      SyncIO {
        Tool.popover
        ()
      }
    }

    def render(p: Props) = {

      val s = p.state.value
      div(
        `class` := "form-group",
        (display := "none").unless(p.show),
        label(
          `class` := s"control-label col-sm-${p.labelWidth}",
          s"${p.label}",
          span(
            `class` := "",
            a(
              `type` := "button",
              `class` := "selfQuestion",
              title := messages("note"),
              VdomAttr("data-container") := "body",
              VdomAttr("data-toggle") := "popover",
              VdomAttr("data-html") := "true",
              VdomAttr("data-placement") := "left",
              VdomAttr("data-content") := p.questionInfo,
              VdomAttr("data-trigger") := "click",
              i(`class` := "fa fa-question-circle-o")
            )
          ).when(p.questionInfo.nonBlank),
          ":"
        ),
        div(
          `class` := s"col-sm-${p.inputWidth}",
          PureInputComponent.Props(p.state, name = p.name, formJq = p.formJq).render
        )
      )

    }

  }

  val Component = ScalaComponent.builder[Props].renderBackend[Backend].componentDidMount(x => x.backend.didMount).build

}
